<template>
	<view class="find">
		<view class="head">
			<view class="article tab" :class="{ act: active == 1 }" @tap="handleTabClick(1)">精选文章</view>
			<view class="brand tab" :class="{ act: active == 2 }" @tap="handleTabClick(2)">品牌列表</view>
		</view>
		<!-- 文章列表 -->
		<view class="articleList" v-if="active == 1">
			<navigator class="item" v-for="item in articleList" :key="item.id" :url="'articleDetail/articleDetail?id=' + item.id">
				<image :src="item.coverImg" mode="" class="icon"></image>
				<view class="info">
					<view class="title">{{ item.title }}</view>
					<view class="author">{{ item.author }}</view>
				</view>
				<view class="btns">
					<view class="viewCount">
						<image src="../../static/icons/view.png" mode=""></image>
						<text class="count">{{ item.viewCount }}</text>
					</view>
					<view class="" class="collectIcon" @tap.stop.prevent="handleCollect(item)">
						<uni-icons type="star" size="22" :color="item.isCollect ? '#f00' : ''"></uni-icons>
					</view>
				</view>
			</navigator>
		</view>
		<!-- 品牌列表 -->
		<view class="brandsList" v-else>
			<view class="item" v-for="item in brandsList" :key="item.id">
				<image :src="item.bigPic" mode="" class="icon"></image>
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { findBrandsByPage, findArticleByPage } from '../../api/find/index.js';
export default {
	data() {
		return {
			brandsList: [],
			articleList: [],
			active: 1
		};
	},
	methods: {
		async getListDate() {
			// 获取品牌列表
			const brandsResp = await findBrandsByPage();
			this.brandsList = brandsResp.data.rows;

			// 获取收藏的文章列表
			const collectArticleList = uni.getStorageSync('articleList');
			// 获取文章列表
			const articleResp = await findArticleByPage();
			this.articleList = articleResp.data.rows.map(el => {
				let isCollect = false;
				if (collectArticleList) {
					let index = collectArticleList.findIndex(item => item.id == el.id);
					isCollect = index > -1;
				}
				return {
					...el,
					isCollect
				};
			});
		},
		// tab点击事件
		handleTabClick(index) {
			this.active = index;
		},
		// 收藏
		handleCollect(item) {
			const collectArticleList = uni.getStorageSync('articleList');
			if (!collectArticleList) {
				uni.setStorageSync('articleList', [item]);
				item.isCollect = true;
				uni.showToast({
					title: '收藏成功',
					icon: 'success'
				});
			} else {
				let index = collectArticleList.findIndex(el => item.id == el.id);
				if (index > -1) {
					collectArticleList.splice(index, 1);
					item.isCollect = false;
					uni.showToast({
						title: '取消收藏',
						icon: 'success'
					});
				} else {
					collectArticleList.push(item);
					item.isCollect = true;
					uni.showToast({
						title: '收藏成功',
						icon: 'success'
					});
				}
				uni.setStorageSync('articleList', collectArticleList);
			}
		}
	},
	onLoad() {
		this.getListDate();
	}
};
</script>

<style lang="scss" scoped>
.find {
	.head {
		position: fixed;
		top: 0;
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #354e44;
		color: #fff;
		z-index: 10;
		.tab {
			margin: 0 20rpx;
			border-bottom: 2rpx solid transparent;
			padding: 18rpx 0;
			&.act {
				border-bottom: 2rpx solid #fff;
			}
		}
	}
	// 文章列表
	.articleList {
		margin-top: 94rpx;
		.item {
			position: relative;
			width: 674rpx;
			height: 484rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin: 28rpx auto;
			overflow: hidden;
			.icon {
				width: 100%;
				height: 382rpx;
				background-color: #8f8f94;
			}
			.info {
				position: absolute;
				bottom: 120rpx;
				color: #fff;
				padding: 0 20rpx;
				.title {
					font-size: 48rpx;
				}
			}
			.btns {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 20rpx;
				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
				.viewCount {
					.count {
						margin-left: 20rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	// 品牌列表
	.brandsList {
		margin-top: 94rpx;
		.item {
			margin: 15rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.icon {
				width: 100%;
				height: 480rpx;
				vertical-align: middle;
			}
			.name {
				padding: 20rpx;
			}
		}
	}
}
</style>
